// stylelint-disable selector-max-type, selector-no-qualifying-type

// A nice way to display branch names inside the UI. Can be a link or not.

.branch-name {
  display: inline-block;
  // stylelint-disable-next-line primer/spacing
  padding: 2px 6px;
  // stylelint-disable-next-line primer/typography, declaration-property-value-no-unknown
  font: 12px $mono-font;
  color: var(--fgColor-muted, var(--color-fg-muted));
  word-break: break-all;
  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
  // stylelint-disable-next-line primer/borders
  border-radius: $border-radius;

  .octicon {
    // stylelint-disable-next-line primer/spacing
    margin: 1px -2px 0 0;
    color: var(--fgColor-muted, var(--color-fg-muted));
  }
}

// When a branch name is a link

a.branch-name {
  color: var(--fgColor-accent, var(--color-accent-fg));
  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));

  .octicon {
    color: var(--fgColor-accent, var(--color-accent-fg));
  }
}
